﻿<div class="row-fluid page-content">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <div class="page-head-line location">
                    <span>位置：</span>
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li>信息维护</li>
                        <li>费用管理</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row cls-list">
            <div class="col-md-12">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <span class="input-group-addon">人员姓名: </span>
                                <input name="CrewName" type="text" class="form-control query-CrewName" />
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <span class="input-group-addon">开始日期: </span>
                                <input name="Start" type="text" class="form-control date query-Start" />
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <span class="input-group-addon">结束日期: </span>
                                <input name="End" type="text" class="form-control date query-End" />
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <button class="query btn btn-primary"><i class="fa fa-search fa-lg"></i>查 询</button>
                                <button class="add btn btn-default"><span class="add"></span>增 加</button>
                                <button class="delete btn btn-default"><span class="delete"></span>删 除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="bonusViewTable" class="myTable"></table>
            </div>
        </div>
        <div class="row cls-edit" style="display:none;">
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">客户信息</h3>
                    </div>
                    <div class="panel-body">
                        <form id="editForm" action="">
                            <input class="Id" name="Id" type="hidden" />
                            <input class="cls-form-reset" type="reset" style="display:none;" />
                            <table>
                                <tr>
                                    <td class="title"><font color="red">*</font> 服务人员：</td>
                                    <td class="content">
                                        <input class="CrewId" name="CrewId" type="hidden" />
                                        <div class="input-group">
                                            <input class="CrewName form-control" name="CrewName" type="text" readonly="readonly" />
                                            <span class="input-group-btn">
                                                <a id="CrewBrowser" class="btn btn-default"><i class="fa fa-lg fa-search"></i></a>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="title"><font color="red">*</font> 日期：</td>
                                    <td class="content"><input name="Date" type="date" class="Date form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title">项目：</td>
                                    <td class="content"><input name="Item" type="text" class="Item form-control" /></td>
                                </tr>
                                <tr>
                                    <td class="title"><font color="red">*</font> 金额：</td>
                                    <td class="content"><input name="Value" type="number" class="Value form-control" min="1" max="2000000000" /></td>
                                </tr>
                                <tr>
                                    <td class="title">备注：</td>
                                    <td class="content"><input name="Note" type="text" class="Note form-control" /></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="panel-footer">
                        <button class="save btn btn-success"><i class="fa fa-save fa-lg"></i> 保 存</button>
                        <button class="cancel btn btn-danger"><i class="fa fa-close fa-lg"></i> 取 消</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="selectUserModal" class="dialog" title="选择人员" style="display:none">
            <div class="query">
                <form action="">
                    <ul>
                        <li>
                            <label>姓名</label>
                            <input name="Name" type="text" class="form-control Name" />
                        </li>
                        <li>
                            <label>性质</label>
                            <select name="Type" class="form-control Type"></select>
                        </li>
                        <li>
                            <label>状态</label>
                            <select name="Status" class="form-control Status">
                                <option value="">所有</option>
                                <option value="在职" selected="selected">在职</option>
                            </select>
                        </li>
                        <li>
                            <label>技能</label>
                            <select name="Skill" class="form-control Skill"></select>
                        </li>
                        <li><button class="query btn btn-primary"><i class="fa fa-search fa-lg"></i> 查 询</button></li>
                    </ul>
                </form>
            </div>
            <table id="selectUserTable" class="myTable"></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var divDialog = {
            minWidth: 1000,
            minHeight: 600,
            autoOpen: false,
            resizable: false,
            buttons: {
                "取 消": function () {
                    $(this).dialog("close");
                }
            }
        };
        $("div.dialog").dialog(divDialog);


        function initSelect() {
            //人员性质
            if (window._util.ItemCode.CrewType != null) {
                var htmlStr = "";
                $.each(window._util.ItemCode.CrewType, function (ix, item) {
                    htmlStr += '<option value="' + item.Value + '">' + item.Text + '</option>';
                });

                htmlStr = '<option value="" selected="selected">所有</option>' + htmlStr;
                $("#selectUserModal .Type").html(htmlStr);
            }
            //服务类别
            if (window._util.ItemCode.ServiceType != null) {
                var htmlStr = "";
                $.each(window._util.ItemCode.ServiceType, function (ix, item) {
                    htmlStr += '<option value="' + item.Value + '">' + item.Text + '</option>';
                });

                htmlStr = '<option value="" selected="selected">所有</option>' + htmlStr;
                $("#selectUserModal .Skill").html(htmlStr);
            }
        }

        $("input.date").datepicker({
            changeYear: true,
            showButtonPanel: true
        });
        $("input.datetime").datetimepicker({
            changeYear: true,
            showButtonPanel: true,
            hour: 8
        });

        initSelect();
        $('#bonusViewTable').bootstrapTable({
            url: window._util.BASE_URL + '/Business/QueryBonus',
            method: 'get',
            dataType: "json",
            cache: true,
            totalField: 'MaxRows',
            dataField: 'Items',
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            singleSelect: true,
            pagination: true, //分页
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 20,                       //每页的记录行数（*）
            pageList: [20, 50, 100, 200, 500],        //可供选择的每页的行数（*）
            search: false, //显示搜索框
            sidePagination: "server", //服务端处理分页
            clickToSelect: true,                //是否启用点击选中行
            showRefresh: false,                  //是否显示刷新按钮
            queryParams: function (params) {
                params["CrewName"] = $("#toolbar .query-CrewName").val();
                params["Start"] = $("#toolbar .query-Start").val();
                params["End"] = $("#toolbar .query-End").val();
                return params;
            },
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: 'CrewName',
                    title: '人员姓名',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Date',
                    title: '日期',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Item',
                    title: '项目',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Value',
                    title: '调整金额',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Note',
                    title: '备注',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    hlign: 'center',
                    formatter: function (value, row, index) {
                        return '<button data-id="' + row.Id + '" class="edit btn btn-success"><i class="fa fa-edit fa-lg"></i> 编 辑</button>';
                    }
                }
            ]
        });
        //查询
        $("#toolbar .query").click(function () {
            $('#bonusViewTable').bootstrapTable('refresh');
        });
        //添加
        $("#toolbar button.add").click(function (args) {
            //表单重置
            $('#page-inner .cls-list').hide();
            $('#editForm input.cls-form-reset').click();
            $("#editForm input.Id").val(0);
            $('#page-inner .cls-edit').show();
        });
        //编辑
        $("#bonusViewTable tbody").click(function (event) {
            var element = $(event.target);
            if (element.is("button.edit")) {
                var id = element.data("id");
                $.ajax({
                    url: window._util.BASE_URL + "/Business/GetBonus",
                    method: "GET",
                    dataType: "json",
                    data: "Id=" + id,
                    success: function (resp) {
                        if (resp != null) {
                            $("#editForm input.Id").val(resp.Id);
                            $("#editForm input.CrewId").val(resp.CrewId);
                            $("#editForm input.CrewName").val(resp.CrewName);
                            if (resp.Date != null) {
                                $("#editForm input.Date").val(resp.Date.substring(0, 10));
                            }
                            $("#editForm input.Item").val(resp.Item);
                            $("#editForm input.Value").val(resp.Value);
                            $("#editForm input.Note").val(resp.Note);

                            $('#page-inner .cls-list').hide();
                            $('#page-inner .cls-edit').show();
                        } else {
                            alert("获取数据出错");
                        }
                    }
                }).fail(function (H, G) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }
        });
        //删除
        $("#toolbar button.delete").click(function () {
            var selections = $('#bonusViewTable').bootstrapTable('getSelections');
            if (selections != null && selections.length > 0) {
                var idArray = new Array();
                $.each(selections, function (ix, item) {
                    idArray.push(item.Id);
                });
                var jsonData = {
                    ids: idArray
                };
                $.ajax({
                    url: window._util.BASE_URL + "/Business/DeleteBonuses",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert("删除成功");
                            $('#bonusViewTable').bootstrapTable('refresh');
                        } else {
                            alert("删除失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }

        });
        //保存
        $("#page-inner .cls-edit button.save").click(function () {
            $('#editForm').submit();
        });
        //取消
        $(".cls-edit button.cancel").click(function () {
            $('#page-inner .cls-edit').hide();
            $('#page-inner .cls-list').show();
        });
        //表单编辑校验
        var validate = $("#editForm").validate({
            debug: false,
            focusInvalid: false,
            onkeyup: false,
            submitHandler: function (form) {
                var jsonData = $(form).serializeObject();
                $.ajax({
                    url: window._util.BASE_URL + "/Business/EditBonus",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    async: true,
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert(resp.Message);
                            $('#bonusViewTable').bootstrapTable('refresh');
                            $('#page-inner .cls-edit').hide();
                            $('#page-inner .cls-list').show();
                        } else {
                            alert("保存失败");
                        }
                    }
                }).fail(function (K, J) {
                    alert("浏览器超时未响应，请刷新重试");
                });
                return false;
            },

            rules: {
                CrewName: {
                    required: true
                },
                Date: {
                    required: true
                },
                Value: {
                    required: true,
                    range: [1, 2000000000]
                }
            },
            messages: {
                CrewName: {
                    required: "服务人员不能为空"
                },
                Date: {
                    required: "日期不能为空"
                },
                Value: {
                    required: "金额不能为空",
                    range: "请输入{0}-{1}之间的数字"
                }
            }

        });
        $("#CrewBrowser").click(function () {
            window._util.openSelectUser("selectUserTable", "selectUserModal");
        });
        /***************选择人员*******************************************************/


    });
</script>
